"use strict";
class HelloWorld extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({
            mode: 'open'
        })
        shadowRoot.innerHTML = this.template();
    }
    template() {
        return `
            <style>
                h1 {
                    color: #f00;
                }
            </style>
            <h1>组件元素</h1>`
    }
    //  声明周期：首次插入DOM时
    connectedCallback() {
        console.log('template element is connected')
    }
    //  生命周期：从DOM钟删除时
    disconnectedCallback() {
        console.log('template element is disconnected')
    }
    //  生命周期： 被移动到新的DOM时
    adoptedCallback() {
        console.log('template element is adopted')
    }
}
customElements.define('hello-world', HelloWorld)